/* $offscreen-menu
 ------------------------------------------*/

@media (max-width: @screen-xs-max) {
  * {
    -webkit-overflow-scrolling: touch;
  }
  .main-panel {
    position: relative;
    min-height: 100%;
  }
  .main-panel,
  .brand {
    width: 100%;
  }
  .main-panel,
  .sidebar-panel {
    -webkit-transition: -webkit-transform @transition-duration cubic-bezier(.7,0,.3,1);
    -moz-transition: -moz-transform @transition-duration cubic-bezier(.7,0,.3,1);
    -o-transition: -o-transform @transition-duration cubic-bezier(.7,0,.3,1);
    transition: transform @transition-duration cubic-bezier(.7,0,.3,1);
  }
  .offscreen {
    .main-panel {
      overflow: hidden;
      position: fixed;
    }
    footer.content-footer {
      display: none;
    }
  }
  .sidebar-panel {
    z-index: 9999;
    .translate(-100%, 0);
    .translate3d(-100%, 0, 0);
  }
  .offscreen .sidebar-panel {
    .translate(0, 0);
    .translate3d(0, 0, 0);
  }
  .app .offscreen-left,
  .app .offscreen-right {
    width: @sidebar-width-sm;
  }
  .app .offscreen-right,
  .app.layout-right-sidebar .sidebar-panel {
    right: 0;
  }
  .move-left .main-panel {
    .translate(@sidebar-width-sm, 0);
    .translate3d(@sidebar-width-sm, 0, 0);
  }
  .move-right .main-panel {
    .translate(-@sidebar-width-sm, 0);
    .translate3d(-@sidebar-width-sm, 0, 0);
  }
  .move-right .sidebar-panel > nav {
    .translate(0, 0);
    .translate3d(0, 0, 0);
  }
  .no-csstransforms .move-right .main-panel {
    right: @sidebar-width-sm;
  }
  .no-csstransforms .move-left .main-panel {
    left: @sidebar-width-sm;
  }
}
